import React from "react";
import { Card, Carousel } from "antd";
import * as styles from "./recommend.module.scss";
import RecommendItem from "./RecommendItem";
export default function Recommend() {
  return (
    <>
      <div>
        <Card title="推荐内容" extra={<a href="https://juejin.cn/recommended">更多</a>}>
          {/* 轮播图 */}
          <div>
            <Carousel autoplay={{ dotDuration: true }} autoplaySpeed={5000}>
              <div>
                <a
                  style={{
                    background:
                      "url(https://image-static.segmentfault.com/583/489/583489293-62e22caab8392) center/cover no-repeat",
                  }}
                  className={styles.contentStyle}
                  href="https://segmentfault.com/a/1190000042203704?utm_source=sf-homepage-headline"
                  target="_blank"
                  rel="noreferrer"
                ></a>
              </div>
              <div>
                <a
                  style={{
                    background:
                      "url(https://image-static.segmentfault.com/248/470/2484709773-635632347923b) center/cover no-repeat",
                  }}
                  className={styles.contentStyle}
                  href="https://chinaevent.microsoft.com/Events/details/0decfcda-1959-4098-891d-690825a58f9e/?channel_id%3d50%26channel_name%3dPaid-SF"
                  target="_blank"
                  rel="noreferrer"
                ></a>
              </div>
              <div>
                <a
                  style={{
                    background:
                      "url(https://image-static.segmentfault.com/364/971/3649718341-6355fab16df40) center/cover no-repeat",
                  }}
                  className={styles.contentStyle}
                  href="https://segmentfault.com/a/1190000042666738?utm_source=sf-homepage-headline"
                  target="_blank"
                  rel="noreferrer"
                ></a>
              </div>
              <div>
                <a
                  style={{
                    background:
                      "url(https://image-static.segmentfault.com/422/352/422352298-6355600c6676b) center/cover no-repeat",
                  }}
                  className={styles.contentStyle}
                  href="https://segmentfault.com/reco/1640000042672710?utm_source=sf-homepage-headline"
                  target="_blank"
                  rel="noreferrer"
                ></a>
              </div>
            </Carousel>
            <RecommendItem
              recommendInfo={{
                num: 1,
                title: "Cursor 额度用完了？不存在的，一招教你薅到底",
                href: "https://juejin.cn/post/7476357359843622951",
              }}
            />
            <RecommendItem
              recommendInfo={{
                num: 2,
                title: "「🌟技术探索🌟」借助 CI / CD 实现前端应用的快速回滚",
                href: "https://segmentfault.com/a/1190000042531062",
              }}
            />
            <RecommendItem
              recommendInfo={{
                num: 3,
                title: "京东一面：为什么 IDEA 建议去掉 StringBuilder，而要使用 “+” 拼接字符串？",
                href: "https://juejin.cn/post/7476400083410108416",
              }}
            />
            <RecommendItem
              recommendInfo={{
                num: 4,
                title: "【精华】为什么class在前端开发中不常用？",
                href: "https://juejin.cn/post/7476296801664204811",
              }}
            />
          </div>
        </Card>
      </div>
    </>
  );
}
